<template>
    <div class="menuContainer">
        <template v-for="item in this.menuList">
            <el-submenu v-if="item.children.length>0" :key="item.id+''" :disabled="item.disabled" :index="item.id+''">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.menuName }}</span>
                </template>
                <menu-tree :menuList="item.children"></menu-tree>
            </el-submenu>
            <el-menu-item
                v-else
                :key="item.id+''"
                :disabled="item.disabled"
                :index="item.url+''"
                :route="item.url"
                @click="savePath(item.url)"
            >
                <i :class="item.icon"></i>
                <span>{{ item.menuName }}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
export default {
    name: 'menuTree',
    data() {
        return {};
    },
    props: {
        menuList: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    methods: {
        //保存激活路径
        savePath(path) {
            window.sessionStorage.setItem('activePath', path);
            this.activePath = path;
        }
    }
};
</script>
<style lang="less" scoped>
span {
    padding: 0 15px;
}
</style>
